<template>
  <div class="home">
    <!-- 头部 -->
    <div class="header">
      <h3 class="title">管理员工作台</h3>
      <!-- 注销 -->
      <el-dropdown>
        <span class="el-dropdown-link">
          当前用户：{{ username }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-button
            :plain="true"
            style="border: none; width: 70px; height: 35px"
            @click="exit()"
            >退出</el-button
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="content">
      <div class="content-left">
        <!-- 左边菜单 -->
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#5dd5c8"
        >
          <el-menu-item index="3" @click="tabchange(3)">
            <i class="el-icon-s-custom"></i>
            <span slot="title">用户列表</span>
          </el-menu-item>
          <el-menu-item index="1" @click="tabchange(1)">
            <i class="el-icon-user"></i>
            <span slot="title">人事列表</span>
          </el-menu-item>
          <el-menu-item index="2" @click="tabchange(2)">
            <i class="el-icon-s-custom"></i>
            <span slot="title">客户列表</span>
          </el-menu-item>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-s-home"></i>
              <span>操作</span>
            </template>
            <el-menu-item index="5" @click="tabchange(5)"
              >添加用户</el-menu-item
            >
            <el-menu-item index="6" @click="tabchange(6)"
              >添加人事信息</el-menu-item
            >
            <el-menu-item index="7" @click="tabchange(7)"
              >添加客户信息</el-menu-item
            >
          </el-submenu>
        </el-menu>
      </div>

      <!-- 人事列表 -->
      <div class="content-right" v-if="tabIndex == 1">
        <div class="searchBtn" style="display: flex">
          <el-input v-model="search1" size="big" placeholder="姓名或工号搜索" />
          <el-button
            size="small"
            icon="el-icon-search"
            style="height: 40px; display: flex; align-items: center"
            @click="getPersonnelList()"
          ></el-button>
        </div>
        <!-- 列表数据 -->
        <el-table :data="list1" style="width: 100%" stripe v-loading="loading">
          <el-table-column label="头像" prop="photo">
            <template slot-scope="scope">
              <img
                style="width: 80px; height: 80px"
                :src="petImage(scope.$index, scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="用户名" prop="name"></el-table-column>
          <el-table-column label="工号" prop="jobNumber"></el-table-column>
          <el-table-column label="密码" prop="passWord"></el-table-column>
          <el-table-column label="电话" prop="phone"></el-table-column>
          <el-table-column label="住址" prop="address"></el-table-column>
          <el-table-column label="创建时间" prop="createTime"></el-table-column>
          <el-table-column align="right">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                @click="updatePersonnel(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="deletePersonnel(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @current-change="getPersonnelList"
          :current-page.sync="pageNo_personnel"
          :page-size="pageSize"
          :total="total_personnel"
          layout="total, prev, pager, next"
        ></el-pagination>

        <el-dialog
          :visible.sync="dialogVisible"
          width="50%"
          @close="clearComp()"
        >
          <update-person
            v-if="showComp"
            :item="PresonDetail"
            :clearComp="clearComp"
          ></update-person>
        </el-dialog>
      </div>

      <!-- 客户列表 -->
      <div class="content-right" v-if="tabIndex == 2">
        <div class="searchBtn" style="display: flex">
          <el-input v-model="search2" size="big" placeholder="客户名搜索" />
          <el-button
            size="small"
            icon="el-icon-search"
            style="height: 40px; display: flex; align-items: center"
            @click="getCustomerList()"
          ></el-button>
        </div>
        <!-- 列表数据 -->
        <el-table :data="list2" style="width: 100%" stripe v-loading="loading">
          <el-table-column label="客户照片" prop="photo">
            <template slot-scope="scope">
              <img
                style="width: 80px; height: 80px"
                :src="petImage(scope.$index, scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="name"></el-table-column>
          <el-table-column label="电话" prop="phone"></el-table-column>
          <el-table-column label="性别" prop="sex"></el-table-column>
          <el-table-column label="年龄" prop="age"></el-table-column>
          <el-table-column label="邮箱" prop="email"></el-table-column>
          <el-table-column label="创建时间" prop="createTime"></el-table-column>
          <el-table-column align="right">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                @click="updateCustomer(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="deleteCustomer(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @current-change="getCustomerList"
          :current-page.sync="pageNo_customer"
          :page-size="pageSize"
          :total="total_customer"
          layout="total, prev, pager, next"
        ></el-pagination>

        <el-dialog
          :visible.sync="dialogVisible"
          width="50%"
          @close="clearComp()"
        >
          <update-customer
            v-if="showComp"
            :item="CustomerDetail"
            :clearComp="clearComp"
          ></update-customer>
        </el-dialog>
      </div>

      <!-- 用户列表 -->
      <div class="content-right" v-if="tabIndex == 3">
        <div class="searchBtn" style="display: flex">
          <el-input v-model="search3" size="big" placeholder="用户名搜索" />
          <el-button
            size="small"
            icon="el-icon-search"
            style="height: 40px; display: flex; align-items: center"
            @click="getUserList()"
          ></el-button>
        </div>
        <!-- 列表数据 -->
        <el-table :data="list3" style="width: 100%" stripe v-loading="loading">
          <el-table-column label="头像" prop="photo">
            <template slot-scope="scope">
              <img
                style="width: 80px; height: 80px"
                :src="petImage(scope.$index, scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="userName"></el-table-column>
          <el-table-column label="密码" prop="passWord"></el-table-column>
          <el-table-column label="电话" prop="phone"></el-table-column>
          <el-table-column label="性别" prop="sex"></el-table-column>
          <el-table-column label="生日" prop="birthday"></el-table-column>
          <el-table-column label="创建时间" prop="createTime"></el-table-column>
          <el-table-column label="是否禁用" prop="status">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                :active-value="1"
                :inactive-value="0"
                inactive-color="#ff4949"
                @change="isAble(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column align="right">
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="deleteUser(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @current-change="getUserList"
          :current-page.sync="pageNo_user"
          :page-size="pageSize"
          :total="total_user"
          layout="total, prev, pager, next"
        ></el-pagination>
      </div>

      <!-- 用户 -->
      <div class="content-right" v-if="tabIndex == 5">
        <add-user></add-user>
      </div>

      <!-- 人事 -->
      <div class="content-right" v-if="tabIndex == 6">
        <add-personnel></add-personnel>
      </div>

      <!-- 添加客户 -->
      <div class="content-right" v-if="tabIndex == 7">
        <add-customer></add-customer>
      </div>
    </div>
  </div>
</template>

<script>
//import axios from "axios";
import cookie from "js-cookie";
import axios from "axios";
import adminRequest from "../request/admin";
import userRequest from "../request/user";
import updatePerson from "../components/updatePersonnel.vue";
import updateCustomer from "../components/updateCustomer.vue";
import addCustomer from "../components/addCustomer.vue";
import addPersonnel from "../components/addPersonnel.vue";
import addUser from "../components/addUser.vue";
export default {
  data() {
    return {
      imageUrl: "",
      loading: false, //加载状态开关
      dialogVisible: false, //编辑框开关
      showComp: true, //子组件的开关

      userinfo: null, // 用户信息
      username: "", //用户名
      tabIndex: "1",

      pageSize: 5,

      list1: [],
      search1: null,
      pageNo_personnel: 1,
      total_personnel: null,
      PresonDetail: [],

      list2: [],
      search2: null,
      pageNo_customer: 1,
      total_customer: null,
      CustomerDetail: [],

      list3: [],
      search3: null,
      pageNo_user: 1,
      total_user: null,
      UserDetail: [],
    };
  },

  components: {
    //组件使用
    updatePerson,
    updateCustomer,
    addCustomer,
    addPersonnel,
    addUser,
  },

  methods: {
    // 关闭对话框
    clearComp() {
      this.dialogVisible = false;
      this.showComp = false;
    },

    idable(item) {
      item.value = false;
    },

    // 菜单切换
    tabchange(index) {
      this.tabIndex = index;
      this.loading = true;
      switch (index) {
        case 1:
          this.getPersonnelList();
          break;
        case 2:
          this.getCustomerList();
          break;
        case 3:
          this.getUserList();
          break;
      }
    },

    // 退出登录
    exit() {
      window.localStorage.removeItem("userinfo");
      cookie.remove("satoken");
      this.$router.push({ path: "/" });
      this.$message.success("注销成功!");
    },

    //人事列表
    getPersonnelList(page = 1) {
      this.pageNo = page;
      adminRequest
        .getPersonnelList({
          pageNo: this.pageNo_personnel,
          pageSize: this.pageSize,
          name: this.search1,
        })
        .then((res) => {
          if (res.data.code === 200) {
            const result = res.data.result;
            this.total_personnel = result.total;
            this.list1 = result.records;
            console.log(this.list1);
            setTimeout(() => {
              this.loading = false;
            }, 500);
          }
        });
    },

    // 编辑人事
    updatePersonnel(item) {
      this.dialogVisible = true;
      this.showComp = true;
      this.PresonDetail = item;
    },

    // 删除人事
    deletePersonnel(item) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          adminRequest.deletePersonnel(item.id).then((res) => {
            if (res.data.code == 200) {
              this.$message.success("删除成功");
              this.getPersonnelList();
            }
          });
        })
        .catch(() => {});
    },

    // 客户列表
    getCustomerList(page = 1) {
      this.pageNo = page;
      adminRequest
        .getCustomerList({
          pageNo: this.pageNo_customer,
          pageSize: this.pageSize,
          name: this.search2,
        })
        .then((res) => {
          if (res.data.code === 200) {
            const result = res.data.result;
            this.total_customer = result.total;
            this.list2 = result.records;
            console.log(this.list2);
            setTimeout(() => {
              this.loading = false;
            }, 500);
          }
        });
    },

    // 编辑客户
    updateCustomer(item) {
      this.dialogVisible = true;
      this.showComp = true;
      this.CustomerDetail = item;
      this.getPersonnelList();
      this.getCustomerList();
    },

    // 删除人事
    deleteCustomer(item) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          adminRequest.deleteCustomer(item.id).then((res) => {
            if (res.data.code == 200) {
              this.$message.success("删除成功");
              this.getCustomerList();
            }
          });
        })
        .catch(() => {});
    },

    // 用户
    getUserList(page = 1) {
      this.pageNo = page;
      adminRequest
        .getUserList({
          pageNo: this.pageNo_user,
          pageSize: this.pageSize,
          userName: this.search3,
        })
        .then((res) => {
          if (res.data.code === 200) {
            const result = res.data.result;
            this.total_user = result.total;
            this.list3 = result.records;
            setTimeout(() => {
              this.loading = false;
            }, 500);
          }
        });
    },

    deleteUser(item) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          adminRequest.deleteUser(item.id).then((res) => {
            if (res.data.code == 200) {
              this.$message.success("删除成功");
              this.getUserList();
            }
          });
        })
        .catch(() => {});
    },

    petImage(index, row) {
      var url =
        axios.defaults.baseURL + "centre/centre/file/getPhoto/" + row.photo;
      console.log(url);
      return url;
    },

    isAble(item) {
      userRequest.isAble(item.id).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("操作成功");
        }
      });
    },
  },

  created() {
    // 获取本地用户信息
    this.userinfo = JSON.parse(window.localStorage.getItem("userinfo"));
    if (
      this.userinfo == null ||
      this.userinfo == "" ||
      this.userinfo.userName != "admin"
    ) {
      //如果没有用户信息就进不来此页面
      window.localStorage.removeItem("userinfo");
      cookie.remove("satoken");
      this.$router.push({ path: "/" });
      this.$notify({
        title: "需要登录才能访问哦",
        type: "warning",
      });
    } else {
      if (this.userinfo.type == "personn") {
        this.$router.push({ path: "/userhome" });
      }
      if (this.userinfo.type == "user") {
        this.$router.push({ path: "/" });
      }
      this.username = this.userinfo.userName;
    }

    // 页面加载时请求数据
    this.getPersonnelList();
    this.getCustomerList();
    this.getUserList();
  },
};
</script>

<style lang="scss" scoped>
@import "../css/adminHome.scss";
</style>
